@mixin w {
  width: 1226px;
  margin: 0 auto;
}

header {
  width: 100%;

  .top {
    width: 100%;
    height: 120px;
    // background-color: red;
    background-image: url('../assets/images/S-top.jpg');
    background-position: center;
    background-size: auto 120px;
    background-repeat: no-repeat;

  }

  .nav {
    width: 100%;
    height: 40px;
    background-color: #333333;

    .nav-wrapper {
      @include w;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .nav-p {
        width: 65%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        >a {
          >li {
            font-size: 12PX;
            color: #b0b0b0;

            &:hover {
              color: white;
            }
          }

        }


        .ver-line {
          margin: 0px 7px;
          height: 12px;
          width: 1px;
          background-color: #424242;
        }
      }

      .list {
        position: relative;
        margin: 0;
        padding: 0;
        font-size: 12px;

        >ul {
          >li {
            padding: 0 19px;
            position: relative;
            float: left;
            font-size: 12px;
            background-color: #333;
            color: #b0b0b0;
            line-height: 40px;
            height: 40px;
            overflow: hidden;

            >p {
              display: inline-block;
              margin: 0 6px;
              font-weight: bold;
              transform: rotate(90deg);
            }

            .box {
              background-color: #fff;
              display: block;
              position: absolute;
              opacity: 0;
              // bottom: -100px;
              left: 0;
              width: 100px;
              // height: 100px;
              line-height: 28px;
              text-align: center;
              font-size: 12px;
              // transition: all 2s ease-in;

              >ul {
                >a {
                  >li {
                    color: #000;

                    &:hover {
                      color: #FF6700;
                    }

                  }

                }
              }
            }
          }

          >li:hover {
            background-color: #fff;
            overflow: visible;
            color: #FF6700;
            cursor: pointer;
          }

          >li:hover .box {
            display: block;
            opacity: 1;
            color: #FF6700;
          }
        }

        .clear {
          clear: both;
        }
      }

      .nav-r {
        width: 11.5%;
        margin-left: 95px;
      }

      .shopping {
        height: 100%;
        line-height: 40px;
        font-size: 12px;
        color: #b0b0b0;
        cursor: pointer;

        &:hover {
          background-color: #fff;
          color: #FF6700;
        }
      }

    }


  }
}

footer {
  .foot-wraaper {
    @include w;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    padding: 30px 0 30px 50px;
    font-size: 12px;
    background: #fafafa;

    .foot-left {
      margin-right: 10px;
    }

    .foot-right {
      .foot-text-one {
        ul {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          li {
            line-height: 18px;

            a {
              font-size: 12px;
              color: #757575;
              cursor: pointer;

              &:hover {
                color: #FF6700;
              }
            }
          }

          span {
            margin: 0 5px;
            width: 1px;
            height: 12px;
            background-color: #b0b0b0;
          }
        }
      }

      .foot-text-two {
        p {
          a {
            font-size: 12px;
            color: #b0b0b0;
            cursor: pointer;
          }

          .light {
            &:hover {
              color: #FF6700;
            }
          }
        }
      }
    }

    .foot-img {
      margin: 4px 0 15px;

      >a {
        img:first-child {
          width: 82px;
          height: 28px;
        }

        >div {
          display: inline-block;
          width: 105px;
          height: 40px;
          overflow: hidden;

          .foot-last {
            width: 105px;
            height: 40px;
          }
        }
      }
    }

    .foot-text-three {
      text-align: center;
      margin: 30px auto 0;
      font-family: '宋体';
      font-size: 28px;
      font-weight: bolder;
      color: #b0b0b0;
    }
  }
}